<template>
	<layout :settings="settings" :footer="footer" :logoPath="logoPath">
		<div slot="header-bar">
			<div style="display: flex; justify-content: center; align-items: center">
				<div class="icontixing">
					<el-popover placement="bottom" trigger="hover">
						<div class="shoucfujied">
							<!-- <div>
								<el-button @click="markdownClick('操作手册')" class="btnya" type="primary" size="mini" plain
									><i class="iconfont icon-zhinan" style="font-size:15px;"></i> 操作手册</el-button
								>
							</div> -->
							<div>
								<el-button @click="markdownClick('版本日志')" class="btnya" type="primary" size="mini" plain
									><i style="font-size:14px;" class="iconfont icon-rizhi"></i> 版本日志</el-button
								>
							</div>
						</div>
						<i class="el-icon-document" style="color: #409eff; font-weight: 500; font-size: 25px" slot="reference"></i>
					</el-popover>
				</div>
				<div class="icontixing">
					<el-popover placement="top-start" trigger="hover" content="产品流程系统">
						<i
							class="iconfont icon-ali-flows-outline"
							@click="toProductInfo"
							slot="reference"
							style="color: #409eff; font-weight: 500; font-size: 30px"
						></i>
					</el-popover>
				</div>
				<div class="icontixing">
					<el-popover placement="top-start" trigger="click">
						<div
							class="tipsParnode"
							v-loading="tipsLoading"
							element-loading-text="正在加载数据，请耐心等待......"
							element-loading-spinner="el-icon-loading"
							element-loading-background="rgba(0, 0, 0, 0.8)"
						>
							<div class="titleClass">
								<span>消息中心</span>
								<span v-if="mockData.length" @click="listClick(null, 1)">清空当前页</span>
							</div>
							<template v-if="mockData.length">
								<div v-for="(item, index) in mockData" :key="index" @click="listClick(item)">
									<div class="tipscontent">
										<div
											style="overflow : hidden;white-space: nowrap;text-overflow:ellipsis;width:91%;"
											:class="`${index}${item.msgId}`"
											:style="globalFunc(`${index}${item.msgId}`, item.msgBody.msgTitle)"
										>
											<div class="xiantiao"></div>
											{{ item.msgBody.msgTitle }}
										</div>
										<el-badge is-dot class="item">{{ dateFunc(item.createDate) }}</el-badge>
										<div class="contentClass">
											<span v-if="!isCharCodeAt(item.msgBody.msgContent).isOverflow"> {{ item.msgBody.msgContent }}</span>
											<span v-if="isCharCodeAt(item.msgBody.msgContent).isOverflow">
												<el-popover
													width="600"
													@show="positionInit(index)"
													trigger="hover"
													:ref="`globalPopover${index}`"
													:popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
													:tabindex="index"
												>
													<div class="recevivingHinicom">
														<div>{{ item.msgBody.msgContent }}</div>
													</div>
													<div slot="reference" style="font-weight:500;">{{ item.msgBody.msgContent }}</div>
												</el-popover>
											</span>
										</div>
									</div>
								</div>
								<el-pagination
									v-if="paging.total > 5"
									background
									:disabled="tipsLoading"
									@current-change="handleCurrentChange"
									:current-page="paging.num"
									:page-sizes="paging.sizes"
									:page-size="paging.size"
									layout="prev,pager,next,jumper,total"
									:total="paging.total"
								/>
							</template>
							<el-empty :image-size="200" style="height:500px;" v-else></el-empty>
						</div>
						<el-badge
							:value="`${$store.state.globalTips.countsTips}`"
							class="item"
							id="badge"
							slot="reference"
							:class="!$store.state.globalTips.countsTips ? 'kong' : ''"
						>
							<i
								class="el-icon-message-solid"
								style="color: #409eff; font-weight: 500; font-size: 26px; "
								@click.capture="msgClick(1)"
							></i>
						</el-badge>
					</el-popover>
				</div>

				<img :src="$store.getters.avatar" class="user-avatar" style="height: 40px; width: 40px; border-radius: 50%; margin-right: -10px" />

				<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
					<div class="avatar-wrapper">
						<span class="name">您好，{{ $store.getters.name }}</span>
						<i class="el-icon-caret-bottom" />
					</div>
					<el-dropdown-menu slot="dropdown">
						<router-link to="/profile/index">
							<el-dropdown-item>个人信息</el-dropdown-item>
						</router-link>
						<el-dropdown-item divided @click.native="logout('platform')">
							<span style="display: block">应用平台</span>
						</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout('signOut')">
							<span style="display: block">退出</span>
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
			<SystemGuide @comIsShowFunc="SystemGuideFunc" :comIsShow="SystemGuideShow" />
			<VersionLog @comIsShowFunc="VersionLogFunc" :comIsShow="VersionLogShow" />
		</div>
	</layout>
</template>

<script>
	import defaultSettings from './defaultSettings'
	import { logout } from 'igw-library/lib/sdk'
	import SystemGuide from '@/components/SystemGuide'
	import VersionLog from '@/components/VersionLog'
	import { unreadList, unreaUpdate } from '@/api/socket'
	import { dateFunc, isCharCodeAt, footer, otherMapType } from './index'
	export default {
		name: 'Layouta',
		components: {
			SystemGuide,
			VersionLog
		},
		data() {
			return {
				logoPath: require('../assets/logo/logo.png'),
				settings: defaultSettings,
				footer: footer,
				SystemGuideShow: false,
				VersionLogShow: false,
				mockData: [],
				dateFunc,
				isCharCodeAt,
				// 分页配置
				paging: {
					// 显示的条目数
					size: 5,
					// 当前页数
					num: 1,
					total: 0,
					pages: 0,
					sizes: [5]
				},
				tipsLoading: false,
				idList: [],
				isBind: true
			}
		},

		computed: {
			obj() {
				return {
					channelId: 'ItApp-ProductInfo-Management',
					msgType: '1',
					orderBy: 'create_date desc',
					pageNum: this.paging.num,
					pageSize: 5,
					roleId: '1',
					userId: this.$store.getters.name
				}
			}
		},

		watch: {
			'$store.state.globalTips.countsTips': function() {
				this.domFunc()
				this.msgClick()
			}
		},

		mounted() {
			setInterval(() => {
				this.$store.dispatch('globalTips/getCounts')
			}, 3000)
			this.domFunc()
		},

		methods: {
			globalFunc(name, title) {
				this.$nextTick(() => {
					if (document.getElementsByClassName(name) && document.getElementsByClassName(name).length) {
						const dom = document.getElementsByClassName(name)[0]
						if (dom.clientWidth < dom.scrollWidth) {
							dom.setAttribute('title', title)
						}
					}
				})
			},

			domFunc() {
				if (document.getElementById('badge').getElementsByClassName('el-badge__content') && this.isBind) {
					this.isBind = false
					document
						.getElementById('badge')
						.getElementsByClassName('el-badge__content')[0]
						.addEventListener('click', () => {
							this.msgClick()
						})
				}
			},

			positionInit(index) {
				setTimeout(() => {
					this.$nextTick(() => {
						if (this.$refs[`globalPopover${index}`] && this.$refs[`globalPopover${index}`].length) {
							this.$refs[`globalPopover${index}`][0].updatePopper()
						}
					})
				})
			},

			// 改变页数
			handleCurrentChange(val) {
				this.paging.num = val
				this.msgClick()
			},

			// 改变条数
			handleSizeChange() {},

			async listClick(item, type) {
				if (!type && this.mockData.length === 1 && this.paging.num !== 1) {
					this.paging.num -= 1
				}
				if (type) {
					for (let index = 0; index < this.idList.length; index++) {
						await unreaUpdate({ msgId: this.idList[index] }).then(res => {})
					}
					this.$store.dispatch('globalTips/getCounts')
					if (this.paging.num !== 1) {
						this.paging.num -= 1
					}
					this.msgClick()
				} else {
					unreaUpdate(item).then(res => {
						if (res.status === 200) {
							this.$store.dispatch('globalTips/getCounts')
							this.msgClick()
							otherMapType(item)
						} else {
							this.$message({ type: 'error', message: res.msg })
						}
					})
				}
			},

			msgClick(form) {
				if (form) {
					this.paging.num = 1
				}
				this.mockData = []
				this.tipsLoading = true
				this.idList = []
				this.$store.dispatch('globalTips/getCounts')
				unreadList(this.obj)
					.then(res => {
						if (res.status === 200) {
							if (res && res.data && res.data.list) {
								res.data.list.forEach(item => {
									item.msgBody = item.msgBody ? JSON.parse(item.msgBody) : {}
									this.idList.push(item.msgId)
								})
								this.mockData = res.data.list
								this.paging.total = res.data.total
							}
						} else {
							this.$message({ type: 'error', message: res.msg })
						}
					})
					.finally(() => {
						this.tipsLoading = false
					})
			},

			logout(type) {
				if (type === 'signOut') {
					logout()
				} else {
					window.location = `${document.location.origin}/web/auth/`
				}
			},

			toProductInfo() {
				window.location =
					process.env.NODE_ENV === 'development' ? `http://localhost:8000/web/productFlow/` : `${document.location.origin}/web/productFlow/`
			},

			markdownClick(msg) {
				if (msg === '操作手册') {
					this.SystemGuideFunc()
				} else if (msg === '版本日志') {
					this.VersionLogFunc()
				}
			},

			SystemGuideFunc() {
				this.SystemGuideShow = !this.SystemGuideShow
			},

			VersionLogFunc() {
				this.VersionLogShow = !this.VersionLogShow
			}
		}
	}
</script>

<style lang="scss" scoped src='./index.scss'>
</style>
